<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
	</head>
	<body>
		<button id="bt">提交</button>
		<input id="input" type="text">
	</body>
	<script>
		let bt = document.getElementById('bt');
		let input = document.getElementById('input');

		function throttle(fn, time, isImmediately) { //要执行的方法，间隔时间，是否立即执行

			let isTrue = isImmediately
			//状态标识
			let flag = true
			return function() {

				if (isTrue) {
					fn.call(this)
					isTrue = false
				} else {

					if (flag) {
						// 将flag的状态改变保证在定时器执行完成前不在走进来
						flag = !flag
						setTimeout(() => {
							fn.call(this)
							// 将flag的状态改变保证在定时器执行完成后能再次进入
							flag = !flag
						}, time)
					}
				}
			}
		}


		// 要执行提交的方法 postData
		function postData() {
			console.log('提交了')
			// 这里就能拿到调用者的this,因为在触发该方法的函数中使了call调用将this指向了调用者
			console.log(this)
		}

		// 要执行搜索的方法 searchData
		function searchData() {
			console.log('搜索了')
			// 这里就能拿到调用者的this,因为在触发该方法的函数中使了call调用将this指向了调用者
			console.log(this)
		}

		// 使用以防频繁的连击提交或者获取一些数据
		// 对象.addEventListener('触发方式',debounce(要执行的方法吗,间隔时间（毫秒）,是否立即触发（true,false）))

		bt.addEventListener('click', throttle(postData, 1000, true))


		//使用在输入框中输入时执行搜索阶段性的去执行

		input.addEventListener('input', throttle(searchData, 800, false))
	</script>
</html>